<!--
 * @Author: sundl
 * @Date: 2021-04-08 16:13:29
 * @project: 天津YQ平台
-->
<template>
  <el-row class="wrap">
    <ModuleCard>
      <template v-slot:header>签收反馈情况</template>

      <el-form label-width="82px">
        <dg-row type="flex">
          <dg-col :span="5">
            <el-form-item label="签收状态：">
              <dg-select v-model="filter.qszt" @change="onChangeStatus" clearable :data="signStatus" />
            </el-form-item>
          </dg-col>
          <dg-col :span="5" class="wrap-col">
            <el-form-item label="反馈状态：">
              <dg-select v-model="filter.fkzt" @change="onChangeStatus" clearable :data="feedbackStatus" />
            </el-form-item>
          </dg-col>
          <dg-col :span="5" class="wrap-col">
            <el-form-item label="发布单位：">
              <dg-tree-drop
                v-model="filter.fbdwdm"
                :code="BM_DEPT"
                :props="{
                  value: 'value',
                  label: 'label',
                  children: 'children'
                }"
                :lazy-load="true"
                :tree-props="{
                  checkOnClickNode: true
                }"
                @change="(...defaultArgs) => onChangeDept('fbdwName', ...defaultArgs)"
                clearable
                filterable
                placeholder="选择发布单位"
                multiple
                collapse-tags
                style="width: 100%;"
                visible-type="branch"
              ></dg-tree-drop>
            </el-form-item>
          </dg-col>
          <dg-col :span="5" class="wrap-col">
            <el-form-item label="接收单位：">
              <dg-tree-drop
                v-model="filter.jsdwdm"
                :code="BM_DEPT"
                :props="{
                  value: 'value',
                  label: 'label',
                  children: 'children'
                }"
                :lazy-load="true"
                :tree-props="{
                  checkOnClickNode: true
                }"
                @change="(...defaultArgs) => onChangeDept('jsdwName', ...defaultArgs)"
                clearable
                filterable
                placeholder="选择接收单位"
                multiple
                collapse-tags
                style="width: 100%;"
                visible-type="branch"
              ></dg-tree-drop>
            </el-form-item>
          </dg-col>
        </dg-row>
      </el-form>
      <InstructionInfo ref="list" />
    </ModuleCard>
  </el-row>
</template>

<script>
import ModuleCard from '@/components/layout/module-card';
import InstructionInfo from './InstructionInfo';
import { getCodeDict } from '@/api/common';
import { BM_QSZT, BM_DEPT, BM_FKZT } from '@/common/codeDic';

export default {
  components: {
    ModuleCard,
    InstructionInfo
  },
  data() {
    return {
      BM_DEPT,
      isLoad: false,
      signStatus: [],
      feedbackStatus: [],
      data: {},
      filter: {
        qszt: '',
        fkzt: '',
        fbdwdm: '',
        fbdwName: '',
        jsdwdm: '',
        jsdwName: ''
      }
    };
  },
  methods: {
    onChangeDept(val) {
      if (!this.isLoad) {
        this.isLoad = true;
        return;
      }
      this.$refs.list.fecthOrders(this.filter);
    },
    onChangeStatus(val) {
      this.$refs.list.fecthOrders(this.filter);
    }
  },
  created() {
    getCodeDict(BM_QSZT).then(res => {
      this.signStatus = res.data;
      this.signStatus.unshift({label: "全部",value: ""});
    });
    getCodeDict(BM_FKZT).then(res => {
      this.feedbackStatus = res.data;
      this.feedbackStatus.unshift({label: "全部",value: ""});
    });
  },
  mounted() {
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  &-col {
    margin-left: 1.25rem;
  }
}
</style>
